<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px;"
        >
            <el-breadcrumb-item>
                <i class="el-icon-document"></i>
                系统公告
            </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="main-container">
            <el-row>
                <el-button
                    @click="noticesTableEdit({id: 0})"
                    type="primary"
                    size="mini"
                    style="float: right"
                >新增公告
                </el-button>
            </el-row>
            <el-row style="margin-top: 10px;">
                <base-table
                    ref="noticesTable"
                    :data="noticesTable.data"
                    :header="noticesTable.header"
                    :operation="noticesTable.operation"
                    :pageInfo="noticesTable.pageInfo"
                    :selected="false"
                    @handleClick="noticesTableButtonClick"
                    @pageJumpTo="noticesTablePageJumpTo"
                    @sizeChange="noticesTableSizeChange"
                >
                </base-table>
            </el-row>
        </div>
    </div>
</template>

<script>
import BaseTable from '@templates/components/BaseTable';
import { itemsPerPage } from '@/client/libs/util';

export default {
    name: 'InstitutionNotices',
    components: {
        BaseTable,
    },
    data() {
        return {
            noticesTable: {
                data: [],
                header: [
                    {
                        label: '标题',
                        prop: 'title',
                    },
                    {
                        label: '类型',
                        prop: 'typeName',
                    },
                    {
                        label: '状态',
                        prop: 'statusName',
                    },
                    {
                        label: '发布时间',
                        prop: 'createTime',
                    },
                    {
                        label: '结束时间',
                        prop: 'deadline',
                    },
                ],
                operation: [
                    {
                        label: '预览',
                        functionKey: 'noticesTablePreview',
                    },
                    {
                        label: '编辑',
                        functionKey: 'noticesTableEdit',
                    },
                    {
                        label: '结束',
                        functionKey: 'noticesTableFinish',
                    },
                    {
                        label: '删除',
                        color: 'red',
                        functionKey: 'noticesTableDelete',
                    },
                ],
                pageInfo: {
                    page: 1,
                    size: itemsPerPage.get(),
                    total: 0,
                },
            },
        };
    },
    mounted() {
        this.noticesTableDataGet();
    },
    computed: {},
    methods: {
        noticesTablePageJumpTo(val) {
            this.noticesTable.pageInfo.page = val;
            // 为 noticesTable.data 赋值相应页上新数据
            this.noticesTableDataGet();
        },
        noticesTableSizeChange(val) {
            this.noticesTable.pageInfo.size = val;
            // 为 noticesTable.data 赋值相应数据量新数据
            this.noticesTableDataGet();
        },
        async noticesTableDataGet() {
            try {
                await this.$axios({
                    // 详见 axios 请求配置项
                    method: 'GET',
                    url: '/PROXY-Remote/notices',
                    params: {
                        size: this.noticesTable.pageInfo.size,
                        page: this.noticesTable.pageInfo.page - 1,
                    },
                }).then((res) => {
                    // 请求失败
                    if (res.data.code !== 200) {
                        throw new Error(res.data);
                    }

                    // 请求成功
                    const result = res.data;
                    console.log('result', result);
                    // 分页信息
                    this.noticesTable.pageInfo = {
                        total: result.pageInfo.total,
                        page: result.pageInfo.page + 1,
                        size: result.pageInfo.size,
                    };
                    // 查询结果数据
                    this.noticesTable.data = [];
                    result.data.forEach((t, index) => {
                        const item = t;
                        item.index = index;
                        this.noticesTable.data.push(item);
                    });
                });
            } catch (e) {
                // 跳出
            }
        },
        noticesTableButtonClick(functionKey, row) {
            this[functionKey](row);
        },
        noticesTablePreview(row) {
            // this.$store.commit('setPropertyGeneral', { key: 'noticeID', value: row.id });
            const width = window.screen.availWidth + 10;
            const height = window.screen.availHeight + 10;
            window.open(`/notices/preview/${row.id}`, '_blank',`location=no,width=${width},height=${height}`);
        },
        noticesTableEdit(row) {
            this.$store.commit('setPropertyGeneral', {
                key: 'noticeID',
                value: row.id,
            });
            this.$router.push('/institution/notices/edit');
        },
        // TODO 公告 - 结束
        noticesTableFinish(row) {
            try {
                this.$axios({
                    method: 'PUT',
                    url: `/PROXY-Remote/notices`,
                    data: {
                        id: row.id,
                        deadline: new Date().getTime() + 2000,
                        status: 0,
                    },
                }).then(
                    (res) => {
                        if (res && res.data.code === 200) {
                            this.$message.success('结束成功');
                            this.noticesTableDataGet();
                        }
                    },
                    (err) => {
                        this.$message.info(`${err.response.data.message}`);
                    }
                );
            } catch (e) {
                console.log(`请求失败  ${e}`);
            }
        },
        // TODO 公告 - 删除
        noticesTableDelete(row) {
            this.$confirm('删除该公告, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(async () => {
                try {
                    this.$axios({
                        method: 'delete',
                        url: `/PROXY-Remote/notices/${row.id}`,
                        headers: {
                            'Content-Type': 'application/json',
                        },
                    }).then(
                        (res) => {
                            if (res && res.data.code === 200) {
                                this.$message.success('删除成功');
                                this.noticesTableDataGet();
                            }
                        },
                        (err) => {
                            this.$message.info(`${err.response.data.message}`);
                        }
                    );
                } catch (e) {
                    console.log(`请求失败  ${e}`);
                }
            });
        },
    },
};
</script>

<style scoped>
</style>
